<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>条件语句</title>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>

<style>
    .nima{
        width: 100px;
        height: 100px;
        background-color: dodgerblue;
    }

    .ss{
        width: 100%;
        height: 300px;
        background-color: salmon;
    }

</style>
</head>

<body>

    <div id="app">

        <!--v-show指令，基于css，html实际存在-->
       <div class="ss" ></div>

        <p></p>
        <div class="nima" v-show="isShow"></div>
    </div>

    <script>

        var showFlag = false;
        var v=new Vue({
             el: '#app',
            data:{
                 isShow:showFlag
            }
        })



        for (var i = 0;i<=100;i++){

            // 用new的形式会更好吧
            (function (i) {

                setTimeout(function () {
                    if (i%2==0){
                        v.isShow = true;
                    }else {
                        v.isShow = false;
                    }
                    console.log(v.showFlag+"  "+i/100)
                    document.getElementsByClassName("ss")[0].style.opacity = ""+i/100;

                },100*i)//相当于有100个定时器，依次在第100、200、300....100000毫秒秒后执行。

            })(i)


        }



    </script>
</div>


</body>
</html>